<template>
  <view>
    <view class="tab">
      <scroll-view scroll-x class="bg-white nav">
      <view class="flex text-center">
        <view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect" :data-id="index">
          {{item.value}}
        </view>
      </view>
    </scroll-view>
    </view>
    <view class="list orderlist" id="order_list collection-wrap" style="margin-top: 10px">
      <view class="uni-load-more more" style="text-align: center;" v-if="result.data.length<=0">
        <uni-text class="uni-load-more__text" style="color: rgb(119, 119, 119);">
          <span>没有更多数据了</span>
        </uni-text>
      </view>
      <view class="order-item" v-for="(item, index) in result.data" :class="'itemtype' + item" :key="index">
        <view class="group_5">
          <view class="box_3" style="justify-content: space-between">
            <view class="image-text_2">
              <text class="text-group_2">{{ item.month_title }}</text>
            </view>
            <view style="float: right" >
              <text
                  style="  width: 14rpx;   border-radius: 50%;   display: inline-block;  height: 14rpx; background: #e63838;"
                  :class="'status' + item.check_status"></text>
              <text decode="true" class="text_7"
                    :class="'statustext' + item.status">{{ item.check_status_text }}
              </text>
            </view>
          </view>
          <view class="text-wrapper_2">
            <text class="text_8">查询信息：</text>
            <text class="text_9">{{ item.appfuns.name }}</text>
          </view>
          <view class="text-wrapper_2">
            <text class="text_8">订单号：</text>
            <text class="text_9">{{ item.order_no }}</text>
          </view>
          <view class="text-wrapper_3">
            <text class="text_10">提交时间：</text>
            <text decode="true" class="text_11">{{ item.create_time }}</text>
          </view>
          <view class="text-wrapper_3" v-for="(itemapp,inkk) in item.formappa">
            <text class="text_10">{{itemapp.title}}：</text>
            <text decode="true" class="text_11">{{itemapp.value}}</text>
          </view>
          <view class="text-wrapper_3" v-if="false">
            <text class="text_10">线索提供：</text>
            <text decode="true" class="text_11">{{ item.provide_clues }}</text>
          </view>
          <view class="line-wap" style="background: #e8e9ed; height: 2rpx; margin: 32rpx 0"></view>
          <view class="box_4" style="display: flex; justify-content: space-between">
            <view>
              <text class="text_20">金额：</text>
              <text class="text_21">¥{{ item.pay_money ? item.pay_money : '-' }}</text>
            </view>
            <view style="display: flex;display: none">
              <view class="text-wrapper_9" @tap.stop="viewUpimgs(item)">
                <text class="text_22">查看图片</text>
              </view>
            </view>
          </view>
          <view class="box_4" style="display: flex;justify-content: flex-end;">
            <view >
              <view class="text-wrapper_9" v-if="item.check_status==0" @tap.stop="overBtn(item)">
                <text class="text_22" style="color:#2d9082;">确认完成</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="cu-modal" :class="modalName=='Image'?'show':''">
      <view class="cu-dialog">
        <view class="bg-img" :style="'background-image: url('+rows.imgs+');height:200px;'">
          <view class="cu-bar justify-end text-white">
            <view class="action" @tap="hideModal">
              <text class="cuIcon-close "></text>
            </view>
          </view>
        </view>
        <view class="cu-bar bg-white">
          <view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
export default {
  data() {
    return {
      TabCur: 0,
      scrollLeft: 0,
      title: 'picker',
      array: [],
      index: -1,
      time: '12:01',
      query: {
        keyword: '',
        page: 1,
        assign_status: 0,
        checkstatus: 0,
        appfuns_id: -1
      },
      result: {
        data: [],
      },
      modalName:'',
      rows:{},
      tabList: [
        {'id':0,value:'已下单'},
        {'id':1,value:'已完成'}
      ]
    };
  },
  created() {
  },
  onShow() {
    this.getorderlist()
  },
  methods: {
    hideModal(){
      this.modalName=''
    },
    viewUpimgs(item){
      this.rows=item
      this.modalName=='Image'
    },
    bindPickerChange: function(e) {
      this.index = e.detail.value
     // console.log(this.array[this.index]['name'])
      this.query.appfun_id=this.array[this.index]['id']
      this.getorderlist()
    },
    gettowcate(){
      const that=this
      this.$api.towcate().then(res => {
        const result = res.data
        that.array = result
      })
    },
    onStatusChang() {
      this.query.checkstatus = this.query.checkstatus == 0 ? 1 : 0;
    },
    tabSelect2(e) {
      this.TabCur = e.id;
      this.query.status = e.id
      this.scrollLeft = (e.id + 1) * 60
      this.getorderlist()
    },
    getorderlist() {
      //uni.showLoading();
      const that = this
      this.$api.myorder(this.query).then(res => {
        const result = res.data
        that.result = result
      })
    },
    tabSelect(e) {
      console.log(e)
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
      this.query.assign_status= this.tabList[this.TabCur]['id']
      this.query.checkstatus= this.tabList[this.TabCur]['id']
      this.getorderlist()
    },
    overBtn(item){
      const that=this
      uni.showModal({
        title: '提示：',
        content: '请确认是否要提交完成么?',
        success: function(res) {
          if (res.confirm) {
            // console.log('确定');
            that.$api.upstatus({'status':1,'action':'check_status','order_id':item.id}).then(res => {
              const result = res.data
              that.modalName = ''
              uni.showToast({
                title: res.msg ? res.msg : '数据提交成功',
                duration: 3000
              });
              that.getorderlist()
            })
          } else if (res.cancel) {
            // console.log('取消');
            /*uni.showToast({
              title: ',
              duration: 3000
            });*/
          }
        }
      });

    }
  }
}
</script>


<style scoped lang="scss">
.orderlist{
  padding: 10px;
}
.group_5 {
  background: #ffffff;
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 20px;
}

uni-page-body,
body {
  background: #f4f5f8;
}

.server {
  display: none;
}

.page {
  background: #f3f7f7;
  height: 100%;
}

.page_box {
  width: 100%;
  height: 100vh;
  background: #f3f7f7;
  overflow: hidden;
}

.page_box_title {
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
}

.logo {
  width: 70px;
  margin: 0 auto;
  padding-bottom: 10px;
}

.tips {
  font-size: 16px;
  color: #aaa;
}

.input_view {
  background: #fff;
  margin: 12px;
  border-radius: 5px;
  padding: 12px;
  box-sizing: border-box;
}

.title {
  display: block;
  line-height: 90rpx;
  font-weight: bold;
  font-size: 36rpx;
  color: #6d6b6b;
}

.input_box {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  height: 90rpx;
  margin-bottom: 20rpx;
  border-bottom: 1px solid #efefef;
}

.input_label {
  font-size: 18px;
  font-weight: bold;
  margin-right: 5px;
}

.number-block {
  position: relative;
}

.cursor-insert {
  position: absolute;
  top: 0px;
  right: -1px;
}

.cursor {
  width: 2px;
  height: 45px;
  background: #FF5C1C;
  border-radius: 3px;
  animation: twinkling 0.9s infinite;
}

@-webkit-keyframes twinkling {
  0% {
    background: #fff;
  }

  100% {
    background: #FF5C1C;
  }
}

.default-content {
  color: #999;
  font-size: 19px;
  font-weight: 600;
}

.content {
  padding: 20rpx;
  line-height: 16px;
  font-weight: 400;
  margin: 12px;
  background: #ffffff;
}

.content p {
  margin: 10px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
}

.content .value {
  font-weight: bold;
  color: #333;
}

.order-info .value {
  color: #b9b9b9;
}

.input-group {
  margin: 15px 0;
}

.input-group label {
  font-size: 14px;
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.input-group input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn:hover {
  background: #ffffff;
}

.footer {
  margin-top: 20px;
  font-size: 14px;
  color: #999;
  text-align: center;
}

.footer a {
  color: #f25a25;
  text-decoration: none;
}

.text-underline {
  position: relative;
  display: inline-block;
  color: #000;
  display: flex;
}

.text-underline::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: 0;
  width: 40px;
  height: 4px;
  background-color: #f25a25;
  transition: width 0.3s ease;
  border-radius: 10px;
}

// .text-underline:hover::after {
//     width: 100%; /* 鼠标悬浮时下划线展开 */
// }
.collection-wrap {
  padding: 32rpx;
  background: #ffffff;

  .order-item {
    background: #ffffff;
    padding: 24rpx;
    margin-bottom: 16rpx;
  }

  .collect-form {
    .cu-form-group {
      padding: 0;
    }
  }

  .collect-pay {
    .pay-tipes {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
    }

    .input-wrap {
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 1px solid #cfcfcf;

      .input-left {
        font-weight: bold;
        font-size: 80rpx;
        color: #333333;
        text-align: left;
        font-style: normal;
      }

      .input-money {
        font-weight: bold;
        font-size: 80rpx;
        color: #333333;
        text-align: left;
        font-style: normal;

        :deep(.uni-input-input) {
          font-weight: bold;
          font-size: 80rpx;
          color: #333333;
          text-align: left;
          font-style: normal;
        }

        input {
          height: 185rpx;
        }
      }
    }

    .cu-form-group {
      :deep( .uni-input-form) {
        text-align: right;
      }

      :deep(.uni-input-input ) {
        text-align: right;
      }
    }
  }

  .box_3 {
    flex-direction: row;
    display: flex;
  }

  .image-text_2 {
    width: 280rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
  }

  .section_2 {
    width: 40rpx;
    height: 40rpx;
    background-size: 100% 100%;
    margin-top: 1rpx;
    display: flex;
    flex-direction: column;
  }

  .text-group_2 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 32rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
  }

  .text_6 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 24rpx;
    font-family: DingTalk-JinBuTi;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 3rpx 0 0 204rpx;
  }

  .thumbnail_2 {
    margin: 12rpx 0 11rpx 16rpx;
    width: 2rpx;
    height: 18rpx;
    background: #d2d7e6;
  }

  .text_7 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 24rpx;
    font-family: DingTalk-JinBuTi;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 3rpx 0 0 15rpx;
  }

  .statustext2 {
    color: #8d919d;
  }

  .status3 {
    color: #8d919d;
  }

  .text-wrapper_2 {
    width: 179rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 41rpx 475rpx 0 0;
  }

  .text_8 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_9 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_3 {
    width: 417rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 16rpx 237rpx 0 0;
  }

  .text_10 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_11 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_4 {
    width: 186rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 16rpx 468rpx 0 0;
  }

  .text_12 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_13 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_5 {
    width: 215rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 16rpx 439rpx 0 0;
  }

  .text_14 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_15 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_6 {
    width: 168rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 16rpx 486rpx 0 0;
  }

  .text_16 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_17 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_7 {
    width: 339rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 16rpx 315rpx 0 0;
  }

  .text_18 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_19 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .image_3 {
    width: 654rpx;
    height: 1rpx;
    margin-top: 31rpx;
  }

  .box_4 {
    margin-top: 32rpx;
    flex-direction: row;
    display: flex;
  }

  .text_20 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 22rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
    margin-top: 17rpx;
  }

  .text_21 {
    overflow-wrap: break-word;
    color: rgba(243, 16, 16, 1);
    font-size: 36rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    line-height: 48rpx;
    margin-top: 8rpx;
  }

  .text_22 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 48rpx;
  }
}


.search-form {
  height: 108rpx;
  background: #ffffff;
  padding: 20rpx 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .search-tabs {
    border-radius: 34rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 8rpx;
    height: 68rpx;

    ::v-deep .u-subsection {
      background: #eff2fb !important;
      border-radius: 8rpx;
      height: 68rpx;
      border: 1rpx solid #eaecef !important;

      .u-subsection__item {
        height: 52rpx;
        border-radius: 8rpx;
        width: 136rpx;
        border-radius: 34rpx;
      }
    }

    :deep(.u-subsection) {
      background: #f5f5f5;
      border-radius: 34rpx;
      height: 68rpx;

      .u-subsection__bar {
        background: #ffffff;
        border-radius: 34rpx !important;
        font-weight: 500;
        font-size: 24rpx;
        color: #0f47f3;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
        padding: 6rpx 32rpx;
      }
    }

    .active {
      background: #ffffff;
      border-radius: 34rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #0f47f3;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      padding: 6rpx 32rpx;

      &::after {
        content: "";
        width: 0;
        height: 2px;
        background-color: #00adb5;
        position: absolute;
        left: 100%;
        bottom: 0;
        transition: all 0.4s;
      }
    }
  }

  .search-date {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 68rpx;
    height: 68rpx;
    background: #f5f5f5;
    border-radius: 34rpx;
  }
}

.order-list {
  padding: 24rpx;

  .order-item {
    background: #ffffff;
    padding: 24rpx;
    margin-bottom: 16rpx;
    border-radius: 16rpx;
  }

  .box_3 {
    flex-direction: row;
    display: flex;
  }

  .image-text_2 {
    width: 280rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
  }

  .section_2 {
    width: 40rpx;
    height: 40rpx;
    background-size: 100% 100%;
    margin-top: 1rpx;
    display: flex;
    flex-direction: column;
  }

  .text-group_2 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 32rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
  }

  .text_6 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 24rpx;
    font-family: DingTalk-JinBuTi;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 3rpx 0 0 204rpx;
  }

  .thumbnail_2 {
    margin: 12rpx 0 11rpx 16rpx;
    width: 2rpx;
    height: 18rpx;
    background: #d2d7e6;
  }

  .text_7 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 24rpx;
    font-family: DingTalk-JinBuTi;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 3rpx 0 0 15rpx;
  }

  .status0 {
    background: #ff893c;
  }

  .status1 {
    background: #ea4141;
  }

  .status2 {
    background: #8d919d;
  }

  .status3 {
    background: #8d919d;
  }

  .statustext0 {
    color: #ff893c;
  }

  .statustext1 {
    color: #ea4141;
  }

  .text-wrapper_2 {
    width: 179rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 41rpx 475rpx 0 0;
  }

  .text_8 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_9 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_3 {
    flex-direction: row;
    display: flex;
    margin-top: 16rpx;
  }

  .text_10 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_11 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_4 {
    width: 186rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 16rpx 468rpx 0 0;
  }

  .text_12 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_13 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_5 {
    width: 215rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 16rpx 439rpx 0 0;
  }

  .text_14 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_15 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_6 {
    width: 168rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 16rpx 486rpx 0 0;
  }

  .text_16 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_17 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text-wrapper_7 {
    width: 339rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 16rpx 315rpx 0 0;
  }

  .text_18 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .text_19 {
    overflow-wrap: break-word;
    color: rgba(23, 33, 54, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
  }

  .image_3 {
    width: 654rpx;
    height: 1rpx;
    margin-top: 31rpx;
  }

  .box_4 {
    margin-top: 32rpx;
    flex-direction: row;
    display: flex;
  }

  .text_20 {
    overflow-wrap: break-word;
    color: rgba(122, 125, 128, 1);
    font-size: 22rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
    margin-top: 17rpx;
  }

  .text_21 {
    overflow-wrap: break-word;
    color: rgba(243, 16, 16, 1);
    font-size: 36rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    line-height: 48rpx;
    margin-top: 8rpx;
  }

  .text-wrapper_9 {
    border-radius: 4rpx;
    display: flex;
    flex-direction: column;
    padding: 8rpx 24rpx;
    margin-left: 10rpx;
    background: #eef2ff;

    .text_22 {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 48rpx;
      text-align: left;
      font-style: normal;
    }
  }

  .text-wrapper_8 {
    background-color: rgba(15, 71, 243, 1);
    border-radius: 4rpx;
    display: flex;
    flex-direction: column;
    padding: 8rpx 24rpx;
    margin-left: 10rpx;
  }

  .text_22 {
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 48rpx;
  }
}

.collet-content {
  .collect-main {
    background: #f7f9fb;
    border-radius: 16rpx;
    margin: 32rpx;
    padding: 48rpx 72rpx;

    .alipay-code {
      border-radius: 8rpx;
      padding: 18rpx;
      width: 400rpx;
      height: 400rpx;
      margin: 0rpx auto;
    }

    .paycode-tips {
      font-weight: 400;
      font-size: 28rpx;
      color: #172136;
      line-height: 36rpx;
      text-align: center;
      font-style: normal;
      margin-top: 16rpx;
    }

    .collect-group {
      display: flex;
      height: 72rpx;
      line-height: 72rpx;
      align-items: center;

      .collect-title {
        font-weight: 400;
        font-size: 28rpx;
        color: #7a7d80;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        width: 140rpx;
      }

      .collect-body {
        font-weight: 400;
        font-size: 28rpx;
        color: #172136;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
}

.order_cate0 {
  color: #e6a874 !important;
}

.order_cate1 {
  color: #73c1c4 !important;
}
</style>
